<template>
	<div class="wy-main message-station">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical" type="vertical" />
					<span class="title-span">站内消息</span>
					<!--<a-button class="title-button" @click="sendShowModal">发布消息</a-button>-->
					<a-button class="title-button" @click="sendShowModal" v-hasPermission="'news:add'">发布消息</a-button>
					<a-button class="title-button"  v-hasPermission="'news:add2'" @click="$refs.autoError.handleShow()">发布消息</a-button>
					<a-divider class="title-divider" />
				</p>
			</a-col>
		</a-row>
		<div class="wy-main-cont">
			<a-tabs v-model="activeKey" tabPosition="left"  @change="callback" >
		      <a-tab-pane tab="已接受" key="1">
		      		<a-row>
						<a-col>
							<a-button @click="getmessageRead()">未读消息
								<span  v-if="unreadSum == 0">({{unreadSum}})</span>
								<i class="unreadNum" v-if="unreadSum>0">({{unreadSum}})</i>
							</a-button>
							<a-button @click="getmessageType(1)">系统消息</a-button>
							<a-button @click="getmessageType(2)">留言板</a-button>
							<!--<a-button @click="getmessageType(2)">服务消息</a-button>
							<a-button @click="getmessageType(4)">撮合规则</a-button>-->
						</a-col>
					</a-row>
					<a-divider/>
					<div style="position: relative;">
						<a-table  :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :pagination="pagination1" :rowKey="record => record.messageUserId" @change="handleTableChange1" :loading="loading"  :columns="columns" :dataSource="AcceptdataList" >
					        <template slot="messageTitle" slot-scope="messageTitle,d">
					         	<a @click="messDetailShowModal(d,'1')" style="color: #333;" v-if="d.readed == 0"> {{messageTitle}}</a><span  v-if="d.readed == 0" class="table-red-dian"></span>
					         	<a @click="messDetailShowModal(d,'0')" style="color: #999999;" v-if="d.readed != 0"> {{messageTitle}}</a>
					        </template>
					        <template slot="readed" slot-scope="readed,d">
					         	<span v-if='readed == 0'>未读</span>
					         	<span v-if='readed != 0'  style="color: #999999;">已读</span>
					        </template>
					        <template slot="messageTypeValue" slot-scope="messageTypeValue,d">
					         	<span v-if='d.readed == 0' >{{messageTypeValue}}</span>
					         	<span v-if='d.readed != 0' style='color: #999999;'>{{messageTypeValue}}</span>
					        </template>
					        <template slot="createTime" slot-scope="createTime,d">
					         	<span v-if='d.readed == 0' >{{createTime}}</span>
					         	<span v-if='d.readed != 0' style='color: #999999;'>{{createTime}}</span>
					        </template>
						</a-table>
						<div style="position: absolute;bottom: 13px;" v-if="showbut">
							<a-button @click="delcars">删除</a-button>
							<a-button @click='sign'>标记已读</a-button>
						</div>
					</div>
		      </a-tab-pane>
		      <a-tab-pane tab="已发送" key="2">
		      		<div style="position: relative;">
						<a-table :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"  :pagination="pagination2" :rowKey="record => record.messageId" @change="handleTableChange2" :loading="loading"  :columns="columns" :dataSource="SenddataList" >
					        <template slot="messageTitle" slot-scope="messageTitle,d">
					         	<a @click="messDetailShowModal(d,'0')" style="color: #333;" > {{messageTitle}}</a>
					        </template>
					        <template slot="readed" slot-scope="messageRead,d">
					         	<span v-if='readed == 0'>未读</span>
					         	<span v-if='readed != 0' >已读</span>
					        </template>
					        
					        <template slot="createTime" slot-scope="createTime,d">
					         	<span>{{createTime}}</span>
					        </template>
						</a-table>
						<div style="position: absolute;bottom: 13px;" >
							<a-button @click="delcars2">删除</a-button>
						</div>
					</div>
		      </a-tab-pane>
		    </a-tabs>
			
		</div>
			<!-- 弹框 -->
		<sendMess @close='close'  ref='sendmess'></sendMess>
		<messDetail @close='close' ref='messDetail'></messDetail>
		<!--未认证弹窗-->
		<auto-error  ref="autoError" ></auto-error>
	</div>
</template>
<script>
import sendMess from './components/SendMess'
import messDetail from './components/MessDetail'
import AutoError from '@/components/dialog/AutoError'
	const columns = [{
		title: '标题内容',
		dataIndex: 'messageTitle',
        key: 'messageTitle',
        scopedSlots: { 
        	customRender: 'messageTitle'
        },
	}, {
		title: '发布时间',
		dataIndex: 'createTime',
        key: 'createTime',
        scopedSlots: { 
        	customRender: 'createTime'
        },
	}, {
		title: '类型',
		dataIndex: 'messageTypeValue',
        key: 'messageTypeValue',
        scopedSlots: { 
        	customRender: 'messageTypeValue'
        },
	}];
	export default {
		 components: {
    	    sendMess,
    	    messDetail,
			AutoError
   		 },
		data() {
			return {
				showbut:false,
				activeKey:'1',
				unreadSum:'',
				readed : '',
				messageType :'',
				AcceptdataList:[],
				SenddataList:[],
				columns,
				loading:false,
				pagination1: {
				  pageSizeOptions: ['10', '20', '30', '40', '100'],
				  defaultCurrent: 1,
				  defaultPageSize: 10,
				  total:0,
				  showSizeChanger: true,
				  showTotal: (total, range) => `共 ${total} 条记录`
				},
				pagination2: {
				  pageSizeOptions: ['10', '20', '30', '40', '100'],
				  defaultCurrent: 1,
				  defaultPageSize: 10,
				  total:0,
				  showSizeChanger: true,
				  showTotal: (total, range) => `共 ${total} 条记录`
				},
				selectedRowKeys:[]
			}
		},
		computed: {
//			rowSelection() {
//				const {selectedRowKeys} = this;
//				return {
//					onChange: (selectedRowKeys, selectedRows) => {
//						console.log(selectedRowKeys, selectedRows)
//						this.selectedRowKeys = selectedRowKeys
//					},
//				}
//			}
		},
		created () {
			this.callback();

		},
		watch:{
			'$route': function (newVal, oldVal) {
				if (newVal.path === '/message/station') {
					this.callback();
				}
			},
		},
		methods: {
			onSelectChange (selectedRowKeys,selectedRows) {
			  console.log(selectedRowKeys, selectedRows)
		      this.selectedRowKeys = selectedRowKeys
		    },
		    getNum(){
		    	this.$get('/message/internalMessage/received/notReadNum').then((r) => {
					console.log('r23:',r.data.data)
					this.unreadSum = r.data.data
	            }).catch((e) => {})
		    },
			// 已接受已发送切换
			callback (val) {
			  if(this.activeKey == 1){
				this.readed = ''
				this.messageType = ''
			  	this.getAcceptMessage()
				this.getNum();
			  }else{
			  	this.getSendMessage()
			  }
			  this.selectedRowKeys = []
			},
			// 未读消息筛选
			getmessageRead(){
				this.readed = 0
			  	this.getAcceptMessage()
			},
			// 消息类型筛选
			getmessageType(type){
				this.readed = ''
				this.messageType = type
			  	this.getAcceptMessage()
			},
			// 关闭窗口刷新数据
			close(){
				this.callback();
			},
			// 标记选中已读
			sign(){
				 if (!this.selectedRowKeys.length) {
				  this.$message.warning('请选择需要标记的记录')
				  return
				}
				let that = this
				this.$confirm({
				  title: '确定标记所选中的记录?',
				  content: '当您点击确定按钮后，这些记录将会标记为已读！',
				  centered: true,
				  onOk () {
				    let logIds = {
				    	ids:that.selectedRowKeys
				    }
					that.$put('/message/internalMessage/received/markAsReaded', logIds).then((r) => {
						console.log(r,898999999)
						if(r.status == 200){
							that.$message.success('标记成功!')
							that.selectedRowKeys = []
							that.getAcceptMessage()
							that.getNum()
						}
					}).catch((e) => {
					})
				  },
				  onCancel () {
				    that.selectedRowKeys = []
				  }
				})
			},
			// 删除已接受消息
			delcars(){
				 if (!this.selectedRowKeys.length) {
				  this.$message.warning('请选择需要删除的记录')
				  return
				}
				let that = this
				this.$confirm({
				  title: '确定删除所选中的记录?',
				  content: '当您点击确定按钮后，这些记录将会被彻底删除',
				  centered: true,
				  onOk () {
				    let logIds = {
				    	ids:that.selectedRowKeys
				    }
					that.$delete('/message/internalMessage/received', logIds).then(() => {
				      that.$message.success('删除成功')
				      that.selectedRowKeys = []
				      that.callback();
				    })
				  },
				  onCancel () {
				    that.selectedRowKeys = []
				  }
				})
			},
			// 删除已发送消息
			delcars2(){
				 if (!this.selectedRowKeys.length) {
				  this.$message.warning('请选择需要删除的记录')
				  return
				}
				let that = this
				this.$confirm({
				  title: '确定删除所选中的记录?',
				  content: '当您点击确定按钮后，这些记录将会被彻底删除',
				  centered: true,
				  onOk () {
				    let logIds = {
				    	ids:that.selectedRowKeys
				    }
					that.$delete('/message/internalMessage/sent',logIds).then(() => {
				      that.$message.success('删除成功')
				      that.selectedRowKeys = []
				      that.callback();
				    })
				  },
				  onCancel () {
				    that.selectedRowKeys = []
				  }
				})
			},
			//发送消息
			 sendShowModal(){
		         this.$refs.sendmess.showModal();
		    },
		    //消息详情
		    messDetailShowModal(d,type){
		     	console.log('dd:',d)
		     	console.log('dd:',type)
		         this.$refs.messDetail.showModal(d,type);
		    },
			// 获取已接受消息列表
			getAcceptMessage() {
				this.loading = true
				this.showbut = false
				this.$get('/message/internalMessage/received',{
					readed : this.readed,
					messageType :this.messageType,
					pageSize : this.pagination1.defaultPageSize,
					pageNum : this.pagination1.defaultCurrent
				},true).then((r) => {
					console.log('r3:',r.data.data)
					this.loading = false
					this.pagination1.total = r.data.data.total

					this.AcceptdataList = r.data.data.rows;
					setTimeout(()=>{
						this.showbut = true
					},500)
	            }).catch((e) => {})
			},
			// 获取已发送消息列表
			getSendMessage() {
				this.loading = true
				this.$get('message/internalMessage/sent',{
					readed : this.readed,
					messageType :this.messageType,
					pageSize : this.pagination2.defaultPageSize,
					pageNum : this.pagination2.defaultCurrent
				},true).then((r) => {
					console.log('r3:',r.data.data)
					this.loading = false
					this.pagination2.total = r.data.data.total
					this.unreadSum = r.data.data.unreadSum
					this.SenddataList = r.data.data.rows;
	            }).catch((e) => {})
			},
			// 删除消息
			deleteRessBook(id) {
				this.$delete('/info/message/'+id).then((r) => {
					this.data = r.data.rows;
	            }).catch((e) => {})
			},
			handleTableChange1 (pagination, filters, sorter) {
			   this.pagination1.defaultPageSize = pagination.pageSize
			   this.pagination1.defaultCurrent  = pagination.current
		       this.getAcceptMessage();
			},
			handleTableChange2 (pagination, filters, sorter) {
			   this.pagination2.defaultPageSize = pagination.pageSize
			   this.pagination2.defaultCurrent  = pagination.current
		       this.getSendMessage();
			},
		}
	}
</script>

<style lang="less" scoped>
.message-station {
	.unreadNum{
	  color:#FF334A;
	  font-style:normal;		
	}
	// 按钮
	.ant-btn{
		font-size:14px;
		color:#333333;
		margin-right:20px;
	}
	//发送信息按钮
	.title-button{
		 float:right;
		 margin-right:0 !important;
		 background:#15837A;
		 color:#FFFFFF;
	}
	.table-red-dian{
	    width: 4px;
	    height: 4px;
	    background: #FF2F47;
	    border-radius: 2px;
	    display: inline-block;
	    position: relative;
	    top: -8px;
	    cursor: pointer;
	    margin-left: 2px;
	}
}
</style>